<template>
    <div>
        <div style="padding:10px; background-color:#fff;">
            <div style="margin-bottom:10px;">
                <el-row>
                    <el-col :span="24">
                        <div class="divtitle">
                            <div class="divtitle-left"></div>
                            <div class="divtitle-text">{{title ? title : '附件'}}</div>
                            <el-tooltip class="item" effect="dark" content="点击上传" placement="top-start">
                                <el-button  v-show="flag2" v-if="businessKey == ''" style="float:right;margin-top: -5px;margin-right: 20px" icon="el-icon-upload2" @click="ifRaid" circle type="primary"></el-button>
                            </el-tooltip>

                            <el-upload
                                    style="float:right;margin-top: -5px;margin-right: 20px"
                                    ref="upload"
                                    :action="fileUrl"
                                    multiple
                                    :data="fileUploadData"
                                    :headers="headers"
                                    :before-upload="beforeUpload"
                                    :on-success="uploadSuccess"
                                    :on-progress="uploadProgress"
                                    accept=".jpg,.jpeg,.png,.gif,.html,.bmp"
                                    :show-file-list="false"
                            >
                                <el-tooltip class="item" effect="dark" content="点击上传" placement="top-start">
                                    <el-button v-show="flag2" v-if="businessKey != ''" icon="el-icon-upload2" circle type="primary"></el-button>
                                </el-tooltip>
                            </el-upload>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div>
              <el-progress :percentage="progress" v-show="progress !== 100 && progress !== 0"></el-progress>
            </div>

            <el-table
                    :data="fileList"
                    border
                    class="table"
                    height="150"
                    ref="multipleTable"
                    v-loading="loading"
                    element-loading-text="极速加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <el-table-column prop="DOC_NAME" label="文件名称" align="center"></el-table-column>
                <el-table-column prop="DOC_DATE" label="上传日期" align="center"></el-table-column>
                <el-table-column prop="UPLOADNAME" label="上传者" align="center"></el-table-column>
                <el-table-column prop="DOC_EXT" label="文件类型" align="center" :formatter="fileTypeFormatter"></el-table-column>
                <!-- <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="预览" placement="top-start">
                            <el-button type="primary" icon="el-icon-view" circle
                                       @click="preview(scope.row)">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start" >
                            <el-button v-show="flag2" type="danger" icon="el-icon-delete" circle
                                @click="removeFile(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column> -->
            </el-table>

            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        :page-size="pageSize"
                        :total="totallRows"
                        :current-page="currentPageNo"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 删除提示框 -->
        <el-dialog title="提示" append-to-body :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
              </span>
        </el-dialog>

        <viewer class="viewer" ref="viewer" @inited="inited" :images="images">
            <img v-for="src in images" :src="src" :key="src" class="image">
        </viewer>

<!--        <el-dialog :modal-append-to-body="true" append-to-body title="图片预览" :visible.sync="previewVisible" center>-->
<!--            <viewer :images="images">-->
<!--                <img v-for="src in images" :src="src" :key="src">-->
<!--            </viewer>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
    import { deleteFileUrl, executionSql, executinoSqlWithPage,showPictureUrl} from "@/config/api";
    import pdf from 'vue-pdf';

    export default {
        name: "planUploadTable",
        components:{
            pdf
        },
        props: {
            raid: {
                type: String
            },
            linkTableType: {
                type: String
            },
            rnucode: {
                type: String
            },
            dsCode: {
                type: String
            },
            flag:{
                type:Boolean
            },
            title: {
                type: String
            }
        },
        watch: {
            raid(val) {
                this.businessKey = val;
                this.comUploadParam();
                this.queryUploadFile();
            },
            flag(val2){
                this.flag2 = val2;
            }
        },
        data() {
            return {
                images: [],
                imgData: "",
                previewVisible: false,
                delVisible: false,
                loading: false,
                docId: "",
                businessKey: this.raid,
                flag2:this.flag,
                progress: 0,
                pageSize: 10,
                totallRows: 0,
                currentPageNo: 1,
                fileUrl: "", //上传地址
                fileList: [], //文件集合
                fileUploadData: {
                    raid: "", //安全编码主键
                    linkTableType: "", //关联表类型字段
                    rnucode: "",
                    project: "",
                    fileName: ""
                },
                token: "",

                previewFileUrl :"", //预览文件地址，

                dialogVisible4preview:false, //预览模态框状态

                numPages:0,
            };
        },
        created() {
            this.token = localStorage.getItem("set_token");
            this.comUploadParam();
            this.queryUploadFile();
        },
        computed: {
            headers() {
                return {
                    Authorization: this.token // 直接从本地获取token就行
                };
            }
        },
        methods: {
            inited(viewer) {
                this.$viewer = viewer;
            },
            //初始化上传参数
            comUploadParam() {
                this.fileUrl = this.axios.defaults.baseURL + "/quality/common/multifilesUpload";
                this.fileUploadData = {
                    raid: this.businessKey,
                    linkTableType: this.linkTableType,
                    rnucode: "",
                    project: localStorage.getItem("project_id"),
                    fileName: ""
                };
            },
            handleCurrentChange(val) {
                this.currentPageNo = val;
                this.queryUploadFile();
            },
            /*删除*/
            removeFile(row) {
                this.delVisible = true;
                this.docId = row.DOC_ID;
            },
            ifRaid() {
                this.$message.error('请先保存！');
            },
            /*上传文件之前的钩子*/
            beforeUpload(file) {
                if (this.businessKey == null || this.businessKey == "") {
                    this.$message.error('请先保存！');
                    return false;
                }
                let orgfileName = file.name;
                this.fileUploadData.fileName = orgfileName;
            },
            /*文件上传成功时的钩子*/
            uploadSuccess(response, file, fileList) {
                if (response.success === true) {
                    this.$message.success('上传成功！');
                    this.$refs.upload.clearFiles();
                    // 增删改之后都需要将页面重新置为1查询
                    this.currentPageNo = 1;
                    this.queryUploadFile();
                } else {
                    this.$message.error('上传失败！')
                }
            },
            /*文件上传时的钩子*/
            uploadProgress(event, file, fileList) {
              this.progress = event.percent;
            },
            lookFile(row) {
            },

            queryUploadFile() {
                if (this.businessKey != null && this.businessKey != "") {
                    executinoSqlWithPage({
                        dsCode: "SECURITY_UPLOAD_FILES",
                        smsNo: this.businessKey,
                        pageNow: this.currentPageNo,
                        pageSize: this.pageSize
                    }).then(res => {
                        console.log("查询的附件：===>>>"+JSON.stringify(res));
                        this.fileList = res.data.records;
                        this.totallRows = res.data.rowCount;
                        this.currentPageNo = res.data.pageNow;
                    });
                } else {
                    this.totallRows = 0;
                    this.currentPageNo = 1;
                    this.fileList = [];
                }
            },
            deleteRow() {
                // 增删改之后都需要将页面重新置为1查询
                this.currentPageNo = 1;
                deleteFileUrl({
                    docId: this.docId
                }).then(res => {
                    this.delVisible = false;
                    if (res.data.success === true) {
                        this.$message.success("删除成功！");
                        this.queryUploadFile();
                    } else {
                        this.$message.error("删除失败：" + res.data.msg);
                    }
                });
            },

            /*预览*/
            preview(row){
                this.images = [];
                showPictureUrl({
                    docId: row.DOC_ID
                }).then(res => {
                    if (res.data.success) {
                        this.previewVisible = true;
                        this.imgData = "data:image/jpeg;base64," + res.data.data;
                        this.images.push(this.imgData);
                        this.$viewer.show();
                    } else {
                        this.$message.error("预览失败：" + res.data.msg);
                    }
                });
            },

            // 文件类型格式化
            fileTypeFormatter(row){
                if(row.DOC_EXT=='jpg'||row.DOC_EXT=='png'||row.DOC_EXT=='bmp'||row.DOC_EXT=='tif'||row.DOC_EXT=='gif'
                    ||row.DOC_EXT=='pcx'||row.DOC_EXT=='tga'||row.DOC_EXT=='exif'||row.DOC_EXT=='fpx'||row.DOC_EXT=='svg'
                    ||row.DOC_EXT=='psd'||row.DOC_EXT=='cdr'){
                        return "图片";
                    }
                else if(row.DOC_EXT=='text'||row.DOC_EXT=='TXT'||row.DOC_EXT=='txt'||row.DOC_EXT=='DOC'||row.DOC_EXT=='doc'
                    ||row.DOC_EXT=='XLS'||row.DOC_EXT=='xls'||row.DOC_EXT=='PPT'||row.DOC_EXT=='ppt'||row.DOC_EXT=='DOCX'||
                    row.DOC_EXT=='XLSX'||row.DOC_EXT=='PPTX'||row.DOC_EXT=='pptx'){
                        return "文档";
                    }
                else{
                    return "未知类型";
                }        
            }
        }
    };
</script>

<style>
    .viewer {
        z-index: 9999;
    }
    .image {
        display: none;
    }
</style>
